<template>
    <view class="user-info flex px-[50rpx] justify-between py-[50rpx] userInfocalss" style="background: url('http://mzd-admin.muzhandao.com/api/uploads/image/20240905/2a044e11-dc14-4471-95c8-b127b90f0c3e.png');padding-top:110rpx;background-size: 100% 100%;display: flex;
    flex-direction: column;
    justify-content: flex-start;">
        <div style="width: 100vw;
height: 48rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 34rpx;
color: #000000;
line-height: 40rpx;
text-align: center;
font-style: normal;
text-transform: none;
text-align: center;">
            我的
        </div>
        <view
            v-if="isLogin"
            class=" "
            @click="navigateTo('/pages/user_data/user_data')"
            style="width: 100%;"
        >
            
            <div class="usericonpot">
                <div style="    display: flex;    align-items: center;width: calc(100% - 48rpx);">
                    <u-avatar :src="user.avatar" :size="176"></u-avatar>
                    <view class="text-white ml-[20rpx] text">
                        {{ user.nickname }}
                    </view>
                </div>
                <div style="    display: flex;    align-items: center;">
                    <navigator v-if="isLogin" hover-class="none" url="/pages/user_set/user_set"  >
                        <img src="http://mzd-admin.muzhandao.com/api/uploads/image/20240905/759b4462-ed5c-423f-b536-31667229fe4b.png" style="width: 48rpx;height: 48rpx;" alt="">
                </navigator>
                  
                </div>  
            
            </div>
        </view>
        <navigator v-else class=" " hover-class="none" url="/pages/index/index">
          <div class="usericonpot">
            <div style="    display: flex;    align-items: center;width: calc(100% - 48rpx);">
                <u-avatar style="border-image: linear-gradient(96deg, rgba(54, 144, 255, 1), rgba(132, 86, 255, 1)) 4 4;" src="http://mzd-admin.muzhandao.com/api/uploads/image/20240905/445c52f2-1f64-443b-9e05-18a2ffeb2b69.png" size="176"></u-avatar>
                <view class="text-white text-3xl ml-[20rpx] text">未登录</view>
            </div>
            <div style="    display: flex;    align-items: center;">
                <img src="http://mzd-admin.muzhandao.com/api/uploads/image/20240905/00d6b4f4-9b5e-48ac-a231-54791da031fa.png" style="width: 48rpx;height: 48rpx;" alt="">
            </div>  
          </div>
        </navigator>
    
    </view>
</template>
<script lang="ts" setup>
const props = defineProps({
    content: {
        type: Object,
        default: () => ({})
    },
    styles: {
        type: Object,
        default: () => ({})
    },
    user: {
        type: Object,
        default: () => ({})
    },
    isLogin: {
        type: Boolean
    }
})
const navigateTo = (url: string) => {
    uni.navigateTo({
        url
    })
}
</script>

<style lang="scss" scoped>
.user-info {
    // height: 180rpx;
    padding: 50rpx 20rpx 0rpx;
    background-position: bottom;
    background-size: 100% auto;
}

.userInfocalss{
    width: 100vw;
    height: 652rpx;
    
    border-radius: 0rpx 0rpx 0rpx 0rpx;
}
 
@font-face {
    font-family: 'PINGFANG_SC_SEMIBOLD'; /* 你可以给字体起一个别名 */
   /*  src: url('~@/static/images/user/PINGFANG-SC-SEMIBOLD.ttf') format('truetype');  *//* 还可以加上 ttf 格式作为备选 */
    font-weight: normal;
    font-style: normal;
} 
.usericonpot{
    display: flex;
    align-content: space-between;
    width: calc(100vw - 80rpx);
    margin-top: 40rpx;
    margin-left: 20rpx;
     .text{
        font-family: 'PINGFANG_SC_SEMIBOLD', sans-serif;
        font-weight: 600;
        font-size: 36rpx;
        color: #222222;
        line-height: 42rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
     }
}
</style>
